<template>
  <v-content>
    <div class="mw-column-center-style" style="padding:0 0.4rem 0 0.4rem;">
      <div style="font-size:0.34rem;margin-top:0.5rem">登录</div>
      <div class="mw-row-spacebetween-style" style="margin-top:0.76rem;width:100%;align-items:center">
        <input id="mobile" type="number" class="menu-input" maxlength="11" placeholder="请输入手机号码" v-on:input="data.checkmobilestatus()" v-model="data.inputmobile"/>
        <img @click="data.deleteMobile()" src="/static/delete.png" style="width:0.14rem;height:0.14rem;object-fit: fill"></img>
      </div>
      <div class="mw-horizon-divider" style="width:100%;margin-top:0.15rem"></div>
      <div class="mw-row-spacebetween-style" style="margin-top:0.27rem;width:100%;align-items:center">
        <input id="code" type="number" class="menu-input" style="width:1.5rem" v-model="data.inputcode" placeholder="请输入验证码"/>
        <div v-if="codestatus == 0" class="mw-unactive-rectangle-button">获取验证码</div>
        <div v-else-if="codestatus == 1" class="mw-active-rectangle-button" @click="data.getcode()">获取验证码</div>
        <div v-else-if="codestatus == 2" class="mw-unactive-rectangle-button">{{data.countdown}}s后重试</div>
        <div v-else-if="codestatus == 3" class="mw-active-rectangle-button" @click="data.getcode()">重新获取</div>
      </div>
      <div class="mw-horizon-divider" style="width:100%;margin-top:0.07rem"></div>
      <div @click="data.sendLogin" class="mw-active-rectangle-button" style="margin-top:0.4rem;width:100%;padding:0;font-size:0.16rem;height:0.49rem;border-radius:0.245rem;text-align:center;line-height:0.49rem;">立即登录</div>
      <div style="margin-top:0.4rem;font-size:0.12rem;color:#999999" class="mw-row-style">
        <div>登录即表示同意</div>
        <div style="color:#5789C2">《服务条款》</div>
        <div>和</div>
        <div style="color:#5789C2">《隐私声明》</div>
      </div>
      <div  v-if="data.isWxMobileBrowser" class="mw-column-center-style" style="margin-top:0.86rem">
        <div class="mw-row-style" style="align-items:center;margin-bottom:0.4rem;">
          <div class="mw-horizon-divider" style="width:0.6rem;"></div>
          <div style="margin-left:0.3rem;margin-right:0.3rem;font-size:0.14rem;color:#6e6d6d">其他登录方式</div>
          <div class="mw-horizon-divider" style="width:0.6rem;"></div>
        </div>
        <img @click="data.sendWx()" src="/static/login_weixin.png" style="width:0.3rem;height:0.3rem;margin-left:0.3rem;margin-right:0.3rem;object-fit: fill"></img>
      </div>

    </div>
  </v-content>
</template>

<script>
  import { mapModules, mapRules } from 'vuet'
  import utils from '../../utils'

  export default {
    mixins: [
      mapModules({ data: 'login'}),
      mapRules({ once:[{path:'login'}]})
    ],
    data() {
      return {
        fullscreenheight: 1
      }
    },

    computed: {
      codestatus() {
        return this.data.getcodestatus
      }
    },
    methods: {
      skipToTest:function () {
        this.$pushRouteByJson({name:"test"})
      },


    },
    created() {
      this.fullscreenheight = this.GLOBAL.fullscreenheight
//      console.log(this.$vuet.getModule('salefilter').mescroll.optUp)
    },
    mounted(){

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .menu-input{
    font-size: 0.18rem;
    color: #333333;
    width: 2.6rem;
    border:none
  }
</style>
<style type="text/css">

  input::-webkit-input-placeholder{ /*WebKit browsers*/
    font-size:0.18rem;
    color: #cccccc;
  }


</style>
